<!--这个页面（城市选择）暂时废弃，不需要，暂时不删除，以后要的时候可以直接用，也可以删除掉，要的时候在开发-->
<template>
    <div class="city-choise">
        <div class="city-header">
            <div class="displayFlex city-search-wrap">
                <span class="search-box">
                    <img class="icon-search" src="../../assets/images/cardList/search.png" alt="">
                    <input class="city-search-icon" type="text" placeholder="城市中文名或拼音">
                </span>
                <span class="city-cancle" @click="$emit('closeCityChoise')">取消</span>
            </div>
            <div class="now-city">当前城市：深圳市</div>
            <div class="city-history">历史</div>
            <ul class="city-list displayFlex">
                <li class="city-item">深圳</li>
                <li class="city-item">宝鸡市</li>
                <li class="city-item">广州</li>
            </ul>
            <div class="city-history">历史</div>
            <ul class="city-list displayFlex">
                <li class="city-item">北京</li>
                <li class="city-item">上海</li>
                <li class="city-item">广州</li>
            </ul>
        </div>
        <div class="floor-wrap">
            <div class="floor-content">
                <a class="floor-href" href="javascript:;">A</a>
                <a class="floor-href" href="javascript:;">A</a>
                <a class="floor-href" href="javascript:;">A</a>
                <a class="floor-href" href="javascript:;">A</a>
                <a class="floor-href" href="javascript:;">A</a>
            </div>
        </div>
        <div>
            <div class="classify-title">A</div>
            <ul class="classify-list">
                <li class="classity-item">阿拉善盟</li>
            </ul>
        </div>
    </div>
</template>

<script>
    export default {
        name: "CityChoise",
        data(){
            list:["A","B"]
        }
    }
</script>

<style scoped lang="scss">
    $fontColor:#999;
    .city-header{
        padding: 12px 12px 9px 20px;
        background-color:#fff ;
    }
    .search-box{
        display: inline-block;
        border: 1px solid $fontColor;
        -webkit-border-radius: 25px;
        -moz-border-radius: 25px;
        border-radius: 25px;
        height: 28px;
        padding: 0 10px;
        -webkit-flex: 1;
        flex: 1;
    }
    .icon-search{
        width: 12px;
    }
    .city-search-icon{
        height: 100%;
    }
    .city-search-icon::-webkit-input-placeholder{
        color: $fontColor;
    }
    .city-search-icon::placeholder{
        color: $fontColor;
    }
    .city-choise{
        background: #fff;
        height:100%;
        height: 100vh;
        width: 100%;
        position: fixed;
        left: 0;
        top: 0;
        z-index: 1040;
    }
    .city-cancle{
        display: inline-block;
        width: 53px;
        height: 30px;
        line-height: 30px;
        text-align: right;
        padding-right: 10px;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
    .now-city{
        color: #56B78C;
        font-size: .15rem;
        padding-top: .15rem;
    }
    .city-history{
        color:$fontColor;
        font-size: .12rem;
        padding-top: .2rem;
    }
    .city-list{
        -webkit-flex-wrap:wrap;
        flex-wrap:wrap;
        padding-top: .13rem;
    }
    .city-item{
        border: 1px solid #F0F0F0;
        color: #333;
        border-radius: 3px;
        font-size: 12px;
        margin-right: 10px;
        padding: .05rem .13rem;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
    }
    .classify-title{
        background-color: #f5f5f5;
        width: 100%;
        height: 20px;
        line-height: 20px;
        padding: 0 .2rem;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        font-size: 12px;
        color: $fontColor;
    }
    .classity-item{
        height: 50px;
        line-height: 50px;
        color: #333333;
        border-bottom: 1px solid #F0F0F0;
    }
    .classify-list{
        padding: 0 .2rem;
    }
    .floor-wrap{
        position: absolute;
        right: .1rem;
        height: 0;
        width: 10px;
        top: 0;
        bottom: 0;
        margin: auto;
    }
    .floor-content{
        position: relative;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        -o-transform: translateY(-50%);
        transform: translateY(-50%);
        line-height: .25rem;
    }
    .floor-href{
        color: #333;
    }
</style>